<template>
    <div>
        <!-- 查询条件开始 -->
        <el-form ref="search" :model="search" :inline="true" label-width="68px">
            <el-form-item label="菜单名称" prop="menuName">
                <el-input
                        v-model="search.menuName"
                        placeholder="请输入菜单名称"
                        clearable
                        size="small"
                        style="width:240px"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                        v-model="search.status"
                        placeholder="请选择状态"
                        clearable
                        size="small"
                        style="width:200px">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchdata">搜索</el-button>
                <el-button type="normal" icon="el-icon-refresh" size="mini" @click="clearsearch">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->


        <!-- 数据表格开始 -->
        <el-table
                border
                :data="menuTableList"
                row-key="menuId"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column v-if="false" label="菜单id" align="left" prop="menuId" />
            <el-table-column label="菜单名称" align="left" prop="menuName" />
            <el-table-column label="菜单类型" align="center" prop="menuType">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.menuType==='M'?'primary':scope.row.menuType==='C'?'danger':'success'"
                    >
                        {{ scope.row.menuType==='M'?'目录':scope.row.menuType==='C'?'菜单':'权限' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="组件路径" align="center" prop="path" />
            <el-table-column label="权限标识" align="center" prop="percode" />
            <el-table-column label="状态" align="center" prop="status" :formatter="statusformat" />
            <el-table-column label="创建时间" align="center" prop="createTime" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button type="text" icon="el-icon-plus" size="mini" @click="handleAdd(scope.row)">添加</el-button>
                    <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->

        <!-- 添加和修改的弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="open"
                width="600px"
                center
                append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="上级菜单" prop="messname">
                            <el-input disabled="disabled" :placeholder="messname" clearable size="small"/>
                        </el-form-item>
                    </el-col>
                        <el-form-item v-if="false" label="上级菜单id" prop="parentId">
                            <el-input v-model="form.parentId" clearable size="small"/>
                        </el-form-item>
                    <el-col :span="24">
                        <el-form-item label="菜单类型" prop="menuType" >
                            <el-radio-group v-model="form.menuType" @change="selecttype">
                                <el-radio label="M" >目录</el-radio>
                                <el-radio label="C">菜单</el-radio>
                                <el-radio label="F">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input   v-model="form.menuName" placeholder="请输入菜单名称" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路由地址" prop="path">
                            <el-input v-model="form.path" placeholder="请输入路由地址" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="form.menuType==='F'" label="权限标识" prop="percode">
                            <el-input v-model="form.percode" placeholder="请输入权限标识" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue">{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 添加和修改的弹出层结束 -->
    </div>
</template>
<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<script>
    export default {
        data() {
            return {
                //存放id
                saveId:'',
                //存放姓名
                saveName:'',
                //状态字典
                statusOptions:[],
                //条件查询
                search:{},
                //菜单数据
                menuTableList: [],
                //开启对话框
                open:false,
                //添加修改标题
                title:'',
                messname:'',
                //添加修改表单数据
                form:{},
                // 表单校验
                rules: {
                    menuName: [
                        { required: true, message: '菜单名称不能为空', tirgger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            //修改
            handleUpdate(row){
                if (this.$refs.form != undefined) {
                    this.$refs.form.clearValidate();
                }
                this.title="修改菜单信息";
                this.saveName=this.messname=row.menuName;
                this.saveId=this.form.parentId = row.menuId;
                this.form =JSON.parse(JSON.stringify(row));
                this.form.menuId=row.menuId;
                this.open=true;
            },
            //触发事件
            selecttype:function (val) {
                this.isShow=(val==='M')?true:false;
                if (this.isShow) {
                    this.form.parentId ="";
                    this.messname ="";
                    console.log(this.messname);
                    console.log(this.form.parentId);
                }else {
                    this.form.parentId=this.saveId;
                    this.messname=this.saveName;
                    console.log(this.saveName);
                    console.log(this.saveId);
                    console.log(this.messname);
                    console.log(this.form.parentId);
                }
            },
            //添加
            handleAdd(row){
                if (this.$refs.form != undefined) {
                    this.$refs.form.clearValidate();
                }
                this.title="添加菜单信息";
                this.saveName=this.messname=row.menuName;
                this.saveId= row.menuId;
                if (row.menuType === 'M') {
                    this.form={parentId:row.menuId,menuType:'C',status:'0'};
                } else if (row.menuType === 'C') {
                    this.form={parentId:row.menuId,menuType:'F',status:'0'};
                }
                this.open=true;
            },
            //提交表单
            handleSubmit(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$axios.post("system/api/menu/saveOrUpdateMenu",this.form).then(r=>{
                            if (r.data.t){
                                this.$message.success(r.data.msg);
                            }else {
                                this.$message.error("操作失败");
                            }
                            this.initMenu();
                            this.open=false;
                            this.title='';
                            this.form={};
                        })
                    }
                });
            },
            //取消表单
            cancel(){
                this.saveId='';
                this.saveName='';
                this.menuName='';
                this.open=false;
            },
            //删除
            handleDelete(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete("system/api/menu/delMenu/"+row.menuId).then(r=>{
                        if (r.data.t){
                            this.$message.success(r.data.msg);
                        }else {
                            this.$message.error("删除失败");
                        }
                        this.initMenu();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //加载菜单表数据
            initMenu(){
                this.$axios.post("system/api/menu/getList",this.search).then(r=>{
                    this.menuTableList=r.data.t;
                })
            },
            //加载系统状态
            initStatus() {
                this.$axios.get("system/api/dict/data/findByType/sys_normal_disable").then(r => {
                    this.statusOptions = r.data.t;
                })
            },
            //状态字典解析
            statusformat(row){
                let val=row.status;
                return this.formatDict(this.statusOptions,val)
            },
            //条件查询、重置数据
            clearsearch(){
                this.search={};
            },
            //条件查询
            searchdata(){
                //查询完成后回到第一页
                this.initMenu();
            },
        },
        created() {
            //加载系统状态
            this.initStatus();
            //加载菜单数据
            this.initMenu();
        }
    }
</script>
